<template>
  <div class="guanZhu">
    <div class="top">
      <img
        :src="newdata.touxiangImg"
        alt=""
      />
      <span class="name">{{newdata.touxiangName}}</span>
      <span class="more">···</span>
    </div>
    <p class="title">{{newdata.title}}</p>
    <p class="content">
      {{newdata.content}}
    </p>
    <div class="picShow">
      <img
        class="post"
        :src="newdata.postImg1"
        alt=""
      />
      <img
        class="post"
        :src="newdata.postImg2"
        alt=""
      />
    </div>
    <section class="bottom">
      <span class="one">
        <span class="iconfont icon-fenxiang"></span>
        <span class="zi">{{newdata.fenxiang}}</span>
      </span>
      <span class="one">
        <span class="iconfont icon-pinglun"></span>
        <span class="zi">{{newdata.pinglun}}</span>
      </span>
      <span class="one">
        <span class="iconfont icon-like"></span>
        <span class="zi">{{newdata.dianzan}}</span>
      </span>
    </section>
  </div>
</template>

<script>
export default {
  created(){
    this.$store.dispatch('getguanZhu',{url:"/data/dongTai/guanZhu"})
  },
  computed:{
    newdata(){
      return this.$store.state.guanZhu.data;
    }
  },
}
</script>

<style scoped>
.guanZhu {
  min-height: 1rem;
  background-color: white;
}
.guanZhu .top {
  height: 0.4rem;
  line-height: 0.3rem;
  padding: 0.05rem 0;
}
.guanZhu .top img {
  height: 100%;
  border-radius: 50%;
  vertical-align: middle;
}
.guanZhu .top .name {
  font-size: 0.12rem;
  margin-left: 0.05rem;
}
.guanZhu .top .more {
  font-size: 0.16rem;
  font-weight: 700;
  float: right;
  color: rgb(155, 155, 155);
}
.guanZhu .title {
  height: 0.333rem;
  /* background-color: turquoise; */
  line-height: 0.333rem;
}
.guanZhu .content {
  min-height: 0.24rem;
  /* background-color: violet; */
  font-size: 0.14rem;
  color: rgb(155, 155, 155);
}
.guanZhu .picShow {
  width: 100%;
  height: 1.64rem;
  border-radius: 5%;
  border: 1px solid rgb(245,245,245);
  margin: 0.05rem 0 0 0;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.guanZhu .post {
  width: 49%;
  height: 100%;
}
.guanZhu .bottom {
  display: flex;
  justify-content: space-around;
  /* background-color: green; */
  padding: 0.05rem 0;
  margin-bottom: 0.1rem;
}
.guanZhu .bottom .one {
  margin-left: 0.2rem;
  color: rgb(155, 155, 155);
  font-size: 0.14rem;
}
.icon-see,
.icon-pinglun,
.icon-like {
  font-size: 0.16rem;
}
</style>